import React, { Component } from 'react';
import {SingleInfo,InfoTitle,InfoImage2} from '../common/Forminfo';
import Qiniu from 'react-qiniu';
import {Link} from 'react-router';
import {SingleInput,QiniuMulti} from '../common/Forminput';
import { connect } from 'react-redux';
import { CostGet } from '../../Redux/Actions/costAction';

class Cost extends Component {
  constructor(props){
    super(props)
  }
  componentWillMount(){
    const opt = {
      orderId:this.props.location.state.orderId,
      profileId:this.props.location.state.profileId
    }
    this.props.dispatch(CostGet(this.props.authReducer.user.data.token,opt));
  }

  render() {
    const cost = this.props.costReducer.cost.data;
    if(cost){
      return (
          <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
              <div className="row">
                  <ol className="breadcrumb">
                  <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                  <li>成本计算</li>
                  </ol>
              </div>
              <div className="row">
                  <div className="col-lg-12">
                    <div className="panel panel-default">
                        <div className="panel-heading">
                            成本计算
                            <Link className="pull-right btn btn-primary" style={{marginTop:"6px"}} to={this.props.location.state.backurl}>返回</Link>
                            <Link className="btn btn-primary pull-right" to={{pathname:"/main/costupdate",state:{backurl:this.props.location.state.backurl}}} style={{marginTop:"6px",marginRight:"15px"}}>
                              编辑
                            </Link>
                        </div>
                        <div className="panel-body">
                            <div className="form-horizontal">
                                <InfoTitle title="成本计算（单位：元）"/>
                                <SingleInfo label="TT开证手续费" info={cost.TTProcedureFee}/>
                                <SingleInfo label="TT开证代理费" info={cost.TTAgencyFee}/>
                                <SingleInfo label="开证利息" info={cost.issuingInterest}/>
                                <SingleInfo label="通关费" info={cost.customsClearanceFee}/>
                                <SingleInfo label="3C" info={cost.cccFee}/>
                                <SingleInfo label="许可证" info={cost.licenceFee}/>
                                <SingleInfo label="开票费用" info={cost.makeInvoiceFee}/>
                                <SingleInfo label="杂费" info={cost.incidentals}/>
                                <SingleInfo label="车价" info={cost.carPrice}/>
                                <SingleInfo label="税款" info={cost.taxFee}/>
                                <SingleInfo label="总计" info={cost.summary}/>
                                <SingleInfo label="二次押汇" info={cost.twiceDocumentaryCredit}/>
                                <SingleInfo label="开票金额" info={cost.makeInvoiceMoney}/>
                                <SingleInfo label="实际应付单" info={cost.accountPayable}/>
                                <InfoImage2 name="付款回单链接" src={cost.paymentBillUrl} />
                            </div>
                        </div>
                    </div>
                  </div>
              </div>	
          </div>
      )
    }else{
      return <div></div>
    }
  }
}

export default connect((state) => {
    const { authReducer,costReducer } = state;
    return {
        authReducer,costReducer
    }
})(Cost);